<template>
  <view class="order-details flex flex-col min-w-0 box-border">
    <!--订单-->
    <MyCard :is-radius="false" class="order-item" padding="32rpx 40rpx">
      <view class="flex items-center justify-between">
        <view class="title mb-[20rpx] text-sm">订单详情</view>
        <!--:value="`/pages/verification/scanList?id=${codeId(projectInfo.userBookingSiteVoList)}`"-->
        <u-qrcode
          v-if="orderParams.orderStatus === 5"
          ref="qrcodeCanvas"
          :size="30"
          :value="`https://szhy.artcollegehb.cn/sport/hexiao/#/pages/verification/scanList?id=${codeId(
            orderParams.sysOrderItemList
          )}`"
          canvas-id="qrcodeCanvas"
          @click="remake"
          @complete="complete"
        />
      </view>

      <view class="flex items-center justify-between">
        <view class="relative">
          <u-image
            :src="getPicture(orderParams.orderType === 2 ? projectInfo.actPhoto : projectInfo.bkiHeadPhoto)"
            height="120rpx"
            width="120rpx"
          />
          <view
            :class="`orderTypes-${orderParams.orderTypes}`"
            class="absolute bottom-0 w-full text-center text-xs pt-1 pb-1"
          >
            {{ ORDER_TYPES_STATUS[orderParams.orderTypes] }}
          </view>
        </view>
        <view class="flex-1 ml-2">
          <view class="font-bold mb-1 order-name">{{ orderParams.orderName }}</view>
          <view class="text-xs text-gray-500">订单编号：{{ orderParams.orderNo }}</view>
          <view class="text-xs text-gray-500">场馆地址：中国车谷全民健身中心-南馆</view>
        </view>
        <view :class="`orderStatus-${orderParams.status}`" class="text-xs self-start">
          {{ ORDER_STATUS[orderParams.status] }}
        </view>
      </view>
      <view v-for="(i, idx) in orderBriefInfo" :key="idx + 1" class="mb-0.5 text-xs session-list mt-2">
        <text class="session-name">场次{{ idx + 1 }}</text>
        <text class="flex-1 line-clamp-1">{{ i.value }}</text>
        <text>￥{{ i.price }}</text>
      </view>
      <view class="mt-5 flex items-center justify-between">
        <text class="text-xs order-time">创建时间：{{ timeDays(orderParams.createTime || '') }}</text>
      </view>
    </MyCard>

    <!--活动详情-->
    <template v-if="orderParams.orderType === 2">
      <MyCard :is-radius="false" class="mt-[20rpx]" padding="0">
        <view class="title mb-[20rpx] text-sm projectTitle">活动详情</view>
        <view>
          <u-swiper
            :list="fileList(projectInfo.actFile)"
            circular
            height="150"
            indicator
            indicatorMode="line"
            width="100%"
          />
          <view class="pl-[40rpx] pr-[40rpx] pb-[24rpx]">
            <view class="font-bold mt-2 mb-2 text-sm">{{ projectInfo.actName }}</view>
            <view class="text-gray-500 text-xs">服务须知：{{ projectInfo.actServe }}</view>
            <view class="text-red-500 font-bold mb-2">
              ￥{{ projectInfo.actMinPrice / 100 }}-{{ projectInfo.actMaxPrice / 100 }}元
            </view>
            <u-line></u-line>

            <!--场馆信息-->
            <view class="mt-[30rpx] mb-[30rpx]">
              <view class="font-bold text-sm title">活动信息</view>
              <view class="flex items-center justify-between">
                <view>
                  <view class="font-bold text-sm mt-1 line-clamp-2">
                    {{ projectInfo.actSite }}（{{
                      mostFormattedDate(projectInfo.actStartTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD')
                    }}-{{ mostFormattedDate(projectInfo.actEndTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD') }}）
                  </view>
                  <view class="text-gray-500 text-xs mt-1 line-clamp-2">武汉市蔡甸区蔡甸区体育中心体育馆西区</view>
                </view>
                <view class="flex items-center justify-between">
                  <view class="text-xs" @tap="toLocationPlace(projectInfo.bkiVenue)">
                    <text class="material-icons text-amber-300 mr-3">location_on</text>
                    <view>地图</view>
                  </view>
                  <view class="text-xs" @tap="makeCall(projectInfo.bkiPhone)">
                    <text class="material-icons text-emerald-500">call</text>
                    <view>电话</view>
                  </view>
                </view>
              </view>
            </view>
            <u-line></u-line>
            <!-- 观影人信息-->
            <view class="font-bold text-sm mt-2 title">观影人信息</view>
            <template v-if="projectInfo?.userActivityVo?.length">
              <view v-for="(item, index) in projectInfo.userActivityVo" :key="index">
                <u-cell :title="item.actVieuserName" :value="item.actVieuserIdentity" size="large" />
              </view>
            </template>
            <u-empty v-else icon="http://cdn.uviewui.com/uview/empty/car.png" mode="car"></u-empty>

            <!--会员卡详情-->

            <!--<view class="font-bold mb-2 text-sm mt-[66rpx]">会员卡详情/培训详情/活动详情</view>-->
            <!--<view class="text-center font-bold text-sm text-red-500 mt-[90rpx]">详细内容</view>-->
          </view>
        </view>
      </MyCard>
    </template>

    <template v-else>
      <MyCard :is-radius="false" class="mt-[20rpx]" padding="0">
        <view class="title mb-[20rpx] text-sm projectTitle">项目详情</view>
        <view>
          <u-swiper
            :list="fileList(projectInfo.bkiFileInfo)"
            circular
            height="150"
            indicator
            indicatorMode="line"
            width="100%"
          />
          <view class="pl-[40rpx] pr-[40rpx] pb-[24rpx]">
            <view class="font-bold mt-2 mb-2 text-sm">{{ projectInfo.bkiSiteName }}</view>
            <view class="text-gray-500 text-xs">报名须知：{{ projectInfo.bkiNotice }}</view>
            <view class="text-red-500 font-bold mb-2">
              {{
                projectInfo.bkiMinPrice === projectInfo.bkiMaxPrice
                  ? `￥${projectInfo.bkiMinPrice / 100}`
                  : `￥${projectInfo.bkiMinPrice / 100}~${projectDetails.bkiMaxPrice / 100}`
              }}
            </view>

            <u-line></u-line>

            <!--场馆信息-->
            <view class="mt-[30rpx] mb-[30rpx]">
              <view class="font-bold text-sm title">场馆信息</view>
              <view class="flex items-center justify-between">
                <view>
                  <view class="font-bold text-sm mt-1 line-clamp-2">
                    {{ projectInfo.bkiVenue }}
                  </view>
                  <view class="font-bold text-xs mb-1">
                    {{ mostFormattedDate(projectInfo.bkiToStartTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD') }}-{{
                      mostFormattedDate(projectInfo.bkiToEndTime, 'YYYYMMDDHHmmss', 'YYYY-MM-DD')
                    }}
                    （{{ convertToHoursMinute(projectInfo.bkiStartTime) }} -
                    {{ convertToHoursMinute(projectInfo.bkiEndTime) }}）
                  </view>
                  <view class="text-gray-500 text-xs mt-1 line-clamp-2">武汉市蔡甸区蔡甸区体育中心体育馆西区</view>
                </view>
                <view class="flex items-center justify-between">
                  <view class="text-xs" @tap="toLocationPlace(projectInfo.bkiVenue)">
                    <text class="material-icons text-amber-300 mr-3">location_on</text>
                    <view>地图</view>
                  </view>
                  <view class="text-xs" @tap="makeCall(projectInfo.bkiPhone)">
                    <text class="material-icons text-emerald-500">call</text>
                    <view>电话</view>
                  </view>
                </view>
              </view>
            </view>
            <u-line></u-line>

            <template v-if="projectInfo.bkipPriceType === 1">
              <view class="font-bold text-sm mt-2 title">车位信息</view>
              <template v-if="bkiCarNoList.length">
                <view v-for="(item, index) in bkiCarNoList" :key="index">
                  <u-cell :title="`车辆${index + 1}`" :value="item" size="large" />
                </view>
              </template>
              <view v-else class="flex items-center justify-center parking-content flex-col">
                <u-image height="100" src="@/static/image/parking-reservation.png" width="150" />
                <view class="text-xl font-bold mb-2">暂不填写</view>
              </view>
            </template>

            <template v-else>
              <view class="font-bold text-sm mt-2 title">人员信息</view>
              <template v-if="userList.length">
                <view
                  v-for="(item, index) in userList"
                  :key="index"
                  class="border border-gray-100 rounded flex items-center justify-between p-2 mt-2"
                >
                  <view>
                    <text class="font-bold">{{ item.bkiUserName }}</text>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <text>性别</text>
                      <view class="ml-2">{{ item.bkiUserSex }}</view>
                    </view>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <text>年龄</text>
                      <view class="ml-2">{{ calculateAge(item.bkiUserIdentity) }}岁</view>
                    </view>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <text>身份证</text>
                      <view class="ml-2">{{ item.bkiUserIdentity }}</view>
                    </view>
                    <view class="text-zinc-300 text-xs flex items-center mt-1">
                      <view>手机号</view>
                      <view class="ml-2">{{ item.bkiUserPhone }}</view>
                    </view>
                  </view>
                </view>
              </template>
              <view v-else class="flex items-center justify-center parking-content flex-col">
                <u-image height="100" src="@/static/image/parking-reservation.png" width="150" />
                <view class="text-xl font-bold mb-2">暂不填写</view>
              </view>
            </template>

            <!--会员卡详情-->

            <!--<view class="font-bold mb-2 text-sm mt-[66rpx]">会员卡详情/培训详情/活动详情</view>-->
            <!--<view class="text-center font-bold text-sm text-red-500 mt-[90rpx]">详细内容</view>-->
          </view>
        </view>
      </MyCard>
    </template>

    <!--&lt;!&ndash;消费信息&ndash;&gt;-->
    <!--<MyCard :is-radius="false" class="order-item" padding="32rpx 40rpx">-->
    <!--  <view class="flex items-center justify-between">-->
    <!--    <view class="title text-sm">消费信息</view>-->
    <!--  </view>-->
    <!--  <view class="font-bold text-[28rpx]">消费信息：2023-08-14 15:30.00</view>-->
    <!--  <view class="font-bold text-[28rpx]">结束时间：2023-08-14 16:30.00</view>-->
    <!--</MyCard>-->

    <!--<MyCard :is-radius="false" class="order-item" padding="32rpx 40rpx">-->
    <!--  <view class="flex items-center justify-between">-->
    <!--    <view class="title text-sm">订单详情</view>-->
    <!--    <view>-->
    <!--      <text class="text-red-500 font-bold text-xs">已上课节3</text>-->
    <!--      <text class="text-emerald-300 font-bold text-xs">/剩余课节2</text>-->
    <!--    </view>-->
    <!--  </view>-->
    <!--  <view class="flex items-center justify-between pb-[20rpx] pt-[20rpx]">-->
    <!--    <view>-->
    <!--      <view class="font-bold text-sm mt-1 line-clamp-2">青少年攀岩体验基础班</view>-->
    <!--      <view class="text-gray-500 text-xs mt-1 line-clamp-2">上课时间：2023-11-21 15:30至16:30</view>-->
    <!--    </view>-->
    <!--    <view class="self-start text-xs">第1节/5节</view>-->
    <!--  </view>-->
    <!--  <u-line></u-line>-->
    <!--  <view class="flex items-center justify-between pb-[20rpx] pt-[20rpx]">-->
    <!--    <view>-->
    <!--      <view class="font-bold text-sm mt-1 line-clamp-2">青少年攀岩体验基础班</view>-->
    <!--      <view class="text-gray-500 text-xs mt-1 line-clamp-2">上课时间：2023-11-21 15:30至16:30</view>-->
    <!--    </view>-->
    <!--    <view class="self-start text-xs">第1节/5节</view>-->
    <!--  </view>-->
    <!--  <u-line></u-line>-->
    <!--  <view class="flex items-center justify-between pb-[20rpx] pt-[20rpx]">-->
    <!--    <view>-->
    <!--      <view class="font-bold text-sm mt-1 line-clamp-2">青少年攀岩体验基础班</view>-->
    <!--      <view class="text-gray-500 text-xs mt-1 line-clamp-2">上课时间：2023-11-21 15:30至16:30</view>-->
    <!--    </view>-->
    <!--    <view class="self-start text-xs">第1节/5节</view>-->
    <!--  </view>-->
    <!--  <u-line></u-line>-->
    <!--</MyCard>-->
  </view>
</template>

<script lang="ts" setup>
import MyCard from '@/components/MyCard/MyCard.vue';
import { ORDER_STATUS, ORDER_TYPES_STATUS, PLACE_POINT } from '@/constants/base';
import { RequestInterface } from '@/typings/request';
import { ORDER } from '@/api/order';
import { convertToHoursMinute, mostFormattedDate, timeDays } from '@/utils/date';
import { calculateAge, getPicture, makeCall, toLocation } from '@/utils/common';

const $http: RequestInterface = inject('$http') as RequestInterface;
const orderParams = ref({
  name: '足球公园7人制场地',
  orderNum: 56898798,
  location: '中国车谷全民健身中心-南馆',
  status: '0',
  orderTypes: 0,
  orderTime: '2023-08-14 15:32:33',
  sessionList: [
    {
      time: '2023年08月16号  08:00-09:00',
      price: '100'
    },
    {
      time: '2023年08月16号  08:00-09:00',
      price: '100'
    }
  ]
});

const orderBriefInfo = computed(() => {
  const orderBriefInfoList = JSON.parse(orderParams.value.orderBriefInfo || '[]');
  return orderBriefInfoList.map((item, index) => {
    return {
      ...item,
      price: orderParams.value.sysOrderItemList[index].itemProductPrice / 100
    };
  });
});

// 车位信息
const bkiCarNoList = computed(() => {
  return (projectInfo.value.bkiCarNo || '').split(',');
});

const getOrderInfo = (id) => {
  $http.post({
    url: ORDER.GET_ORDER_DETAILS,
    data: {
      id
    },
    success: (res) => {
      orderParams.value = res;
      if (res.sysOrderItemList.length) {
        if (orderParams.value.orderType === 2) {
          getActivityInfo(res.sysOrderItemList.map((item) => item.itemProductId));
        } else {
          getProjectInfo(res.sysOrderItemList.map((item) => item.itemProductId));
        }
      }
    }
  });
};

const projectInfo = ref({});
const userList = ref([]);
// 查询项目详情
const getProjectInfo = (ids) => {
  if (ids) {
    $http.post({
      url: ORDER.GET_BOOKING_SITE_BY_USER_BOOKING_ID,
      data: {
        list: ids
      },
      success: (res) => {
        projectInfo.value = res;
        userList.value = res.bkiUserIdentityList.map((item, index) => {
          return {
            bkiUserIdentity: item,
            bkiUserName: res.bkiUserNameList[index],
            bkiUserPhone: res.bkiUserPhoneList[index],
            bkiUserSex: res.bkiUserSexList[index]
          };
        });
      }
    });
  }
};

// 场馆导航
const toLocationPlace = (name) => {
  toLocation({
    name, // 位置名字
    latitude: PLACE_POINT[name].lat, // 维度
    longitude: PLACE_POINT[name].lng, // 经度
    address: name // 地址详细说明
  }).then(() => {
    console.log('成功');
  });
};

// 绘制二维码
const qrcodeCanvas = ref(null);

const remake = () => {
  // 拿到组件实例
  qrcodeCanvas.value.toTempFilePath({
    success: (res) => {
      // 预览图片
      uni.previewImage({
        urls: [res.tempFilePath],
        success: (value) => {
          console.log(value);
        }
      });
    }
  });
};

// 生成成功
const complete = (value) => {
  console.log(value, 2131231);
};

// 查询文体活动详情
const getActivityInfo = (ids) => {
  if (ids) {
    $http.post({
      url: ORDER.GET_ACTIVITY_BY_USER_BOOKING_ID,
      data: JSON.stringify(ids),
      success: (res) => {
        projectInfo.value = res;
      }
    });
  }
};

// 头部文件上传
const fileList = (file) => {
  const newBkiFileTop = JSON.parse(file || '[]');
  return newBkiFileTop.map((item) => item.path);
};

const codeId = (list) => {
  if (list && list.length) {
    return list.map((item) => item.itemProductId).join(',');
  }
  return '';
};

onLoad((query) => {
  console.log(query);
  const { id } = query;
  getOrderInfo(id);
});
</script>

<style lang="scss" scoped>
.order-details {
  background-color: rgb(250, 250, 251);

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    color: #0064ff;
  }

  .projectTitle {
    padding: 32rpx 40rpx 0 40rpx;
  }

  .order-item {
    margin-top: 20rpx;

    .order-name {
      color: #333333;
      font-size: 28rpx;
    }

    .session-list {
      color: #171726;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .session-name {
        color: #0064ff;
        margin-right: 20rpx;
      }
    }

    .order-time {
      color: #696975;
    }

    /*订单类型*/
    $orderTypeList: (
      0: #af5ddf,
      1: #ff94d8,
      2: #00b8ff
    );
    @each $key, $value in $orderTypeList {
      .orderTypes-#{$key} {
        background-color: $value;
        color: white;
      }
    }

    /*订单状态*/
    $orderStatus: (
      0: #0fdb99,
      1: #e6e9ef
    );
    @each $key, $value in $orderStatus {
      .orderStatus-#{$key} {
        color: $value;
      }
    }
  }
}
</style>
